<template>
	<view class="msg-list">
		<view class="msg-item">
			<view class="item-left">
				<text class="item-name">昵称</text>
				<input class="item-input" placeholder="请输入昵称" placeholder-class="input-placeholder" type="text"
					v-model="currentInfo.nickName">
			</view>
			<view class="item-right">
				<view class="user-avatar-block" @tap="chooseAvatarImage">
					<image class="user-avatar" :src="getImgUrl(currentInfo.avatar)"></image>
					<view class="change-btn">更换</view>
				</view>
			</view>
		</view>

		<picker @change="genderPickerChange" :value="currentInfo.sex - 1" :range="genderArray">
			<view class="msg-item">
				<view class="item-left">
					<text class="item-name">性别</text>
					<view class="item-input" :class="{'input-placeholder': currentInfo.sex < 1 }">
						{{currentInfo.sex < 1 ? '请选择': genderArray[currentInfo.sex - 1]}}
					</view>
				</view>
				<view class="item-right">
					<image class="right-arrow-icon" src="../../static/rightTriangleArrow.png"></image>
				</view>
			</view>
		</picker>

		<view class="msg-item" @tap="toSelectIdentityDesc">
			<view class="item-left">
				<text class="item-name">专业</text>
				<view class="item-input input-placeholder">
					{{currentInfo.identityDesc? currentInfo.identityDesc:'请选择被评人的专业'}}
				</view>
			</view>
			<view class="item-right">
				<image class="right-arrow-icon" src="../../static/rightTriangleArrow.png"></image>
			</view>
		</view>	<view class="msg-item">
			
		<view class="item-left">
				<text class="item-name">单位</text>
				<input class="item-input" placeholder="请输入" placeholder-class="input-placeholder" type="text"
					v-model="currentInfo.company">
			</view>
		</view>

		<view class="msg-item">
			<view class="item-left">
				<text class="item-name">职位</text>
				<input class="item-input" placeholder="如高级英语教师等,请输入" placeholder-class="input-placeholder" type="text"
					v-model="currentInfo.position">
			</view>
		</view>

		<!-- 	<view class="msg-item">
			<view class="item-left">
				<text class="item-name">地区</text>
				<input class="item-input" placeholder="如:北京、上海、广东广州等,请输入" placeholder-class="input-placeholder"
					type="text" v-model="currentInfo.address">
			</view>
		</view> -->

		<view class="msg-item" @tap="toSelectLabels">
			<view class="item-left">
				<text class="item-name">喜好</text>
				<view class="item-input input-placeholder" v-if="selectedUserLabels.length === 0">请选择(可多选,最多5个)</view>
				<view class="selections-list" v-else>
					<view class="list-item" v-for="(fileId,index) in selectedUserLabels" :key="index">
						<image class="list-item-img" :src="getImgUrl(fileId)"></image>
					</view>
				</view>
			</view>
			<view class="item-right">
				<image class="right-arrow-icon" src="../../static/rightTriangleArrow.png"></image>
			</view>
		</view>


		<uni-data-picker :localdata="areaData" popup-title="请选择地区" @change="onSelectArea">
			<view class="msg-item">
				<view class="item-left">
					<text class="item-name">地区</text>
					<view class="item-input input-placeholder">{{currentInfo.address ? currentInfo.address :'请选择地区'}}
					</view>
				</view>
			</view>
		</uni-data-picker>

		<view class="msg-item">
			<view class="item-left">
				<text class="item-name">自述</text>
				<input class="item-input long" placeholder="请输入" placeholder-class="input-placeholder" type="text"
					v-model="currentInfo.selfDecription">
			</view>
		</view>


		<view class="submit-btn-wrap">
			<largeBtn @btnClk="updateUserInfo">提交修改</largeBtn>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	import areaData from "../../config/areaData.js"
	export default {
		data() {
			return {
				selectedGenderIndex: -1,
				genderArray: ['男', '女'],
				currentInfo: {
					nickName: "",
					sex: 0,
					avatar: "",
					identityDesc: "",
					company: "",
					position: "",
					address: "",
					selfDecription: "",
					tagIds: []
				},

				areaData: areaData
			}
		},
		computed: {
			...mapState(['userInfo', 'token', 'globalConfig', 'tempIdentityDesc', 'selectedUserLabels']),
		},
		created() {
			this.initInfo()
		},
		onShow() {
			this.currentInfo.identityDesc = this.tempIdentityDesc || this.userInfo.identityDesc
		},
		methods: {
			initInfo() {
				for (let key in this.userInfo) {
					if (key != 'userTags') {
						this.currentInfo[key] = this.userInfo[key]
					}
				}
				const userTags = []
				this.userInfo.userTags.forEach((item) => {
					userTags.push(item.tagId)
				})
				this.$store.commit('setSelectedUserLabels', userTags)
			},
			chooseAvatarImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.uploadFile({
							url: `${this.globalConfig.origin}/api/settingservice/uploadfileavatar`, //后端用于处理图片并返回图片地址的接口
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'Authorization': this.token,
							},
							success: res => {
								const resData = JSON.parse(res.data)
								this.currentInfo.avatar = resData.data + ''
								this.updateAvatar()
							},
							fail: () => {}
						})

					}
				});
			},
			genderPickerChange(e) {
				this.currentInfo.sex = e.target.value * 1 + 1
			},
			updateAvatar() {
				this.$api.updateAvatar(this.currentInfo.avatar).then((res) => {
					const userInfo = this.userInfo
					userInfo.avatar = this.currentInfo.avatar
					this.$store.commit('setUserInfo', userInfo)
					uni.showToast({
						title: '头像更换成功',
						icon: 'none'
					})
				})
			},
			updateUserInfo() {
				const userTags = []
				this.selectedUserLabels.forEach((fileId) => {
					userTags.push(fileId)
				})
				this.currentInfo.tagIds = userTags
				this.$api.updateUserInfo(this.currentInfo).then((res) => {
					this.$api.getUserInfo().then((res) => {
						this.$store.commit('setUserInfo', res)
						uni.showToast({
							title: '信息修改成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					})

				})
			},

			toSelectIdentityDesc() {
				uni.navigateTo({
					url: '/pages/userDetail/selectPosition'
				})
			},
			toSelectLabels() {
				uni.navigateTo({
					url: '/pages/userDetail/selectUserLabels'
				})
			},
			onSelectArea(e) {
				const dataArr = e.detail.value
				const area = dataArr.reduce((pre, item) => {
					return pre + item.text
				}, '')
				this.currentInfo.address = area
			},
		}
	}
</script>

<style>
	page {
		background-color: #F3F7FD;
	}
</style>
<style lang="less">
	.msg-list {
		padding: 30rpx 40rpx;
		padding-bottom: 140rpx;

		.msg-item {
			background: #FFFFFF;
			box-shadow: 0 4rpx 8rpx 0 rgba(218, 227, 248, 0.5);
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			margin-bottom: 40rpx;

			.item-left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.item-name {
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
					line-height: 50rpx;
					margin-bottom: 20rpx;
				}

				.item-input {
					font-size: 32rpx;
					font-weight: 400;
					color: #666;
					line-height: 44rpx;
					width: 500rpx;

					&.long {
						width: 600rpx;
					}
				}

				.input-placeholder {
					color: #999;
				}

				.selections-list {
					display: flex;
					flex-wrap: wrap;

					.list-item {
						margin: 10rpx;

						.list-item-img {
							width: 90rpx;
							height: 90rpx;
						}
					}
				}
			}

			.item-right {
				min-height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.user-avatar-block {
					display: flex;
					flex-direction: column;
					align-items: center;

					.user-avatar {
						width: 96rpx;
						height: 96rpx;
						border-radius: 48rpx;
					}

					.change-btn {
						margin-top: 12rpx;
						background-color: #F2F6FD;
						width: 84rpx;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
						font-size: 26rpx;
						font-weight: 400;
						color: #336DA6;
						line-height: 36rpx;
					}
				}

				.right-arrow-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.submit-btn-wrap {
		position: fixed;
		z-index: 3;
		left: 40rpx;
		bottom: 48rpx;
		width: 670rpx;
	}
</style>
